<template>
  <div class="infos">
    <x-header :left-options="{backText: ''}">
        消息中心
    </x-header>
    <div class="info_lists">

        <div class="info_list" v-for="(item,index) of unreadInfos" :key="index" @click="reader(item)">
            <badge></badge>
            <div class="list_top">
                <div class="title">{{item.content}}</div>
                <div class="time">{{item.create_time|formatDate}}</div>
            </div>
            <div class="list_img" v-if="item.img">
                <img :src="item.img" alt="">
            </div>
            <!-- <div class="list_content">{{item.content}}</div> -->
        </div>
        <div class="info_list" v-for="(item2,index2) of readInfos" :key="index2+unreadInfos.length+1">
            <div class="list_top">
                <div class="title">{{item2.content}}</div>
                <div class="time">{{item2.create_time|formatDate}}</div>
            </div>
            <div class="list_img" v-if="item2.img">
                <img :src="item2.img" alt="">
            </div>
            <!-- <div class="list_content">{{item.content}}</div> -->
        </div>
        <!-- <div style="text-align:center;font-size:14px;padding:10px;" v-show="noData">暂无数据</div> -->
    </div>

  </div>
</template>

<script>
import { XHeader, Group, Cell,Badge } from "vux";
import { mapGetters } from "vuex";
import api from "../../api/index.js";
export default {
  components: {
    XHeader,
    Group,
    Cell,
    Badge
  },
  computed: {
    ...mapGetters(["newsLists"])
  },
  created() {
    // let userid = window.localStorage.getItem("user");
    // this.$store.dispatch("getNewsList", { user_id: userid });
  },
  activated() {
    let userid = window.localStorage.getItem("user");
    this.$store.dispatch("getNewsList", { user_id: userid });
  },
  watch: {
    newsLists(Value) {
      this.unreadInfos = Value.unread;
      this.readInfos = Value.read;
    }
  },
  data() {
    return {
      noData: false,
      unreadInfos: [
        {
          content: "当月走访任务没完成",
          create_time: "2018-7-15"
        },
        {
          content: "关于端午放假通知",
          create_time: "2018-6-12"
        }
      ],
      readInfos: []
    };
  },
  methods: {
    reader(item) {
      api.post_news_read({ message_id: item.id }).then(res => {
        this.$router.push({path: "/home/help/add"});
      });
    }
  }
};
</script>

<style lang="less">
.info_lists {
  font-size: 0;
  min-height: 100vh;
  padding: 2.875rem 0 0;
  background: rgb(245, 245, 249);
  position: relative;
  .info_list {
    padding: 0.875rem 0.625rem 0.8125rem 0.875rem;
    border-bottom: 1px solid #d9d9d9;
    position: relative;
    .vux-badge{
      position: absolute;
      left:1px;
      top:50%;
      transform: translateY(-50%);
    }
    .list_top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        font-size: 1.125rem;
        color: rgb(51, 51, 51);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .time {
        font-size: 0.875rem;
        color: rgb(102, 102, 102);
      }
    }
    .list_img {
      padding: 0.5625rem 0 0.6875rem;
      width: 100%;
      overflow: hidden;
      img {
        width: 100%;
        height: 5.4375rem;
      }
    }
    .list_content {
      font-size: 0.9375rem;
      color: rgb(102, 102, 102);
    }
  }
}
</style>
